<template>
    <div class="school paddLR padd">
        <div class="htit font40 flex-bect">
            <b>各院校库</b>
            <form class="form rd40 ov">
                <input type="search" class="text" placeholder="搜索你感兴趣的学校" v-model="keywords" @keyup="showInfo">
            </form>
        </div>
        <!-- 类目 -->
        <dl class="tabs flex-bect">
            <dd v-for="(item,j) in schoolScreen" :key="j" class="dd flex-ct" @click="getSchoolCur(j)" :class="{on:schoolCur === j}">{{item.name}}</dd>
        </dl>
        <!-- 系类 -->
        <dl class="screen flex-lect">
            <dd v-for="(item,j) in schoolScreen[schoolCur].list" :key="j" class="dd flex-lect">
                <li class="li flex-ct cur" @click="getSchoolCheck(schoolCur,item)" :class="{on:schoolScreen[schoolCur].cur == item.id}">{{item.name}}</li>
            </dd>
        </dl>
        <!-- 选中 -->
        <dl class="checked flex-lect">
            <dd v-for="(item,i) in schoolScreen" :key="i" class="dd cur" v-show="item.checked">{{item.checked.name}} <span class="close" @click="close(i,item)"></span></dd>
        </dl>
        <div class="schoolList" :style="total<=0?'width:108%;position: relative;left:-4%;':''">
            <div class="flex-bect school-box">
                <div v-for="(item,i) in schoolList" :key="i" class="imga flex-bect">
                    <a :href="'./schoolDetail.html?id='+item.id">
                        <div class="imgW"><img :src="item.thum==''?'http://oss.kongjie88.com/liuxuepc/image/home-5-1.png':item.thum" alt="" class="img"></div>
                        <div class="mlW">
                            <div class="div">
                                <div class="name row1">{{item.name}}</div>
                                <div class="labs p row1">留学模式：<span class="lab">{{item.time}}</span></div>
                                <div class="country p row1">对接国家：{{item.guojia}}</div>
                                <div class="youshi p row1">院校优势：{{item.advantage}}</div>
                                <div class="flex-bect bottom">
                                    <span class="address">地区：{{item.region}}</span>
                                    <a :href="'./schoolDetail.html?id='+item.id" class="btn flex-ct btn1">详情</a>
                                    <a href="javascript:;" class="btn flex-ct btn2">咨询</a>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
              <div  v-if="total<=0" class="box" style="background:#F6F7FB;padding:2em 0;font-size:14px;text-align:center;">
               <img src="http://oss.kongjie88.com/5c892e9a16e47cd344968510b44e6ffa.png" alt="" style="width:50%;">
               <div  style="color:#C2C2C2;font-size:16px;padding-top: 10px ;">这里空空如也</div>
                <div  style="color:#999999;padding:10px 0;" class="schoolahrref">换个关键词试试
                 <a   @click="getSchoolCheck(9,'')">美国</a> 
                 <a  @click="getSchoolCheck(91,'')">英国</a>
                 <a  @click="getSchoolCheck(92,)">德国</a></div>
                 <div  style="color:#C2C2C2;">搜索结果不满意？ <a href="javascript:;" style="color:#02C16C">联系我们</a> 你想要去的国家</div>
            </div>
        </div>
        <div class="flex-ct">
            <el-pagination background layout="prev,pager,next" @current-change="changePage" :total="total"  v-if="total>0"></el-pagination>
        </div>
    </div>
</template>
<script>
// 不支持 import
module.exports = {
    data: function() {
        return {
            total: 20,
            keywords: '',
            schoolScreen: [], //选择
            schoolCur: 0,
            schoolList: [], //学校列表
            guojia: "",
            grade: "",
            time: "",
            region: "",
        };
    },
    components: {},
    methods: {
        // 翻页
        changePage(e) {
            post('school', { page: e }).then(res => { this.schoolList = res.data });
        },
        getSchoolCur(i) {
            this.schoolCur = i
        },
        getSchoolCheck(cur, item) {
             if(cur==9){
            cur=0
            item={field:'guojia',id:2,name:'美国'};
            this.grade=''
          }else if(cur==91){
              cur=0
            item={field:'guojia',id:1,name:'英国'};
            this.grade=''
          }else if(cur==92){
              cur=0
            item={field:'guojia',id:13,name:'德国'}
            this.grade=''
          }
            this.schoolScreen[cur].cur = item.id;
            this.schoolScreen[cur].checked = item;
            if (item.field == "guojia") { this.guojia = item.id }
            if (item.field == "grade") { this.grade = item.id }
            if (item.field == "time") { this.time = item.id }
            if (item.field == "region") { this.region = item.id }
            var json = { guojia: this.guojia, grade: this.grade, time: this.time, region: this.region }
            post('school', json).then(res => {
                this.schoolList = res.data;
                this.total = res.total
            });
        },
        close(i, item) {
            if (item.id == "guojia") { this.guojia = "" }
            if (item.id == "grade") { this.grade = "" }
            if (item.id == "time") { this.time = "" }
            if (item.id == "region") { this.region = "" }
            var json = { guojia: this.guojia, grade: this.grade, time: this.time, region: this.region }
            post('school', json).then(res => {
                this.schoolList = res.data;
                this.total = res.total
            });
            this.schoolScreen[i].cur = 0;
            this.schoolScreen[i].checked = ''
        },
        // 搜索
        submit() {
            post('school', { name: this.keywords }).then(res => {
                this.schoolList = res.data;
                this.total = res.total
            });
        },
        showInfo() {
            console.log(this.keywords)
            post('school', { name: this.keywords.trim() }).then(res => {
                this.schoolList = res.data;
                this.total = res.total
            });
        }
    },
    mounted() {
        post('guojia').then(res => { this.schoolScreen = res; });
        post('school', {guojia:getId("id")}).then(res => { this.schoolList = res.data;
            this.total = res.total; });
    }
};
</script>
<style>
.schoolahrref a{cursor:pointer;color:#333333;background:#E6E6E8;border-radius: 5px;width: 55px;height: 20px;display:inline-block;}
</style>